<template>
	<el-row style="width: 100%;text-align:left;">
		<el-row :gutter="20">
			<el-col :md="24" :lg="24">
				<section class="wt-header" style="padding:0; overflow:hidden">
					<router-link to="/patient/detail"><h3>{{userInfo.name}}</h3></router-link>
					<span>{{userInfo.sex}}</span><span>出生日期：{{userInfo.birthday}}</span><span>病案号：{{userInfo.clinicNumber}}</span>
						<!-- <el-tag
							type="primary"
							v-for="tag in caseData.caseName"
							:key="tag"
						>{{tag}}</el-tag> -->
					<div class="rightButtons" v-if="hasEditPermission">
						<el-button
							@click="editCase"
							icon="edit">修改病例基本信息</el-button>
						<el-button
							@click="deleteCase"
							:icon="deleteIcon">删除该病例</el-button>
					</div>
					<!-- <div class="message" v-if="!hasEditPermission">
						<el-alert
								title="没有权限修改本病例"
								type="info"
								show-icon>
						</el-alert>
					</div> -->
				</section>
			</el-col>
		</el-row>
		<el-tabs type="border-card" v-model="tab">
			
			<!-- <el-tab-pane label="病例概要" name="timeline" style="min-height: 200px">
				<wt-model-timeline
					ref="timeline"
					:models="config.categories"
					:config="config.timeline"
					:params-data="paramsData"
					:allow-edit="hasEditPermission"
					@edit="handleTimelineEdit"
				></wt-model-timeline>
			</el-tab-pane> -->
				<el-tab-pane v-for="(singleTemplate,index) in illTemplate" :key="index" :label="singleTemplate.name" :name="singleTemplate.name" style="min-height: 200px">
					<!-- <span slot="label">
						<img class="tab-icon" :src="getCategoryIcon(cat)"/>
						<span >{{cat.title}}[{{number[cat.tableName]}}]</span>
					</span> -->
					<template>
							<dynamic-form :ref="singleTemplate.name" :type="patternCtrls[singleTemplate.name]" :layout="getLayout(singleTemplate.name)" :options="singleTemplate.forms" @on-value-change="(val,property) => updateValues(singleTemplate.name,val, property)" :value="value" :extra="{birthday:1284048000000,admissionDate:1520006400000}"></dynamic-form>
							<!-- extra需要吧配置改过来才行client-extra -->
							<form-footer class="form-footer" v-if="patternCtrls[singleTemplate.name] == 'input'" @on-submit="closeLoaidng => save(singleTemplate.name,closeLoaidng)" @on-cancel="cancel(singleTemplate.name)" :hideCancel="!id ? true : false"></form-footer>
							<el-button type="primary" class="form-footer" v-else @click="toEdit(singleTemplate.name)">编辑</el-button>
					</template>
					
					
					<!-- <dynamic-form :options="singleTemplate.forms"></dynamic-form> -->
					<!-- <template v-if="cat.single && !cat.customDisplay">
						<wt-model-info v-on:count="handleCountChange" :ref="cat.name" :model="cat" :params-data="paramsData" :allow-edit="hasEditPermission"></wt-model-info>
					</template>
					<template v-else>
						<wt-model-table
							:ref="cat.name"
							:model="cat" 
							:params-data="paramsData" 
							:allow-add="hasEditPermission"
							:allow-edit="hasEditPermission"
							:allow-remove="hasEditPermission"
							v-on:count="handleCountChange"
						></wt-model-table>
					</template> -->
				</el-tab-pane>

				<!-- <el-tab-pane :label="cat.title" :name="cat.name" style="min-height: 200px">
					<span slot="label">
						<img class="tab-icon" :src="getCategoryIcon(cat)"/>
						<span >{{cat.title}}[{{number[cat.tableName]}}]</span>
					</span>
					</el-tab-pane> -->
		</el-tabs>
	</el-row>
</template>
<script>
import {
	getTemplateDetail,
	saveCasedetail,
	getUser
} from "../../utils/actions";
import dynamicForm from "lib/components/dynamic-form";
import dynamicFormView from "lib/components/dynamic-form/value";
import formFooter from "../../components/form/footer";
export default {
	name: "core",
	props: {
		illType: {
			type: String,
			required: true
		},
		pattern: {
			type: String,
			default: "view" //['view','input']
		},
		id: [String, Number], //病例记录id
		patientId: [String, Number], //患者id
		value: Array
	},
	components: {
		dynamicForm,
		formFooter,
		dynamicFormView
	},
	data() {
		return {
			tab: "血压",
			illTemplate: [],
			hasEditPermission: false,
			formValues: {},
			property: {},
			userInfo: {},
			templateId: null,
			patternCtrls: {}
			// hasEditPermission:Permission.checkPermission("patient-case-add") &&
			// 	Permission.canEditCase(
			// 		this.caseData.properties.creator_doctor_grade,
			// 		this.caseData.creator_doctor_id
			// 	) /*传入病例等级/病例创建者等级*/,
		};
	},
	methods: {
		toEdit(name) {
			this.patternCtrls[name] = "input";
		},
		getLayout(name) {
			console.warn("namess", name);
			switch (name) {
				case "手术及麻醉":
				case "围手术及随访情况":
				case "用药信息":
					return "v-layout-table";
				default:
					return "v-layout-form";
			}
		},
		openLoading() {
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			});
			return loading;
		},
		load() {
			let loading = this.openLoading();
			getTemplateDetail(this.illType)
				.then(res => {
					loading.close();
					if (_.isString(res)) {
						res = JSON.parse(res);
					}
					this.illTemplate = res.items;
					this.illTemplate.forEach(item =>
						this.$set(this.patternCtrls, item.name, this.pattern)
					);
					this.templateId = res.id;
				})
				.catch(err => {
					loading.close();
					this.$message.error("获取模板失败！" + err.message);
				});
			if (this.patientId) {
				getUser(this.patientId) //"5aa8fa1bf9054a000636b735"
					.then(res => {
						res = _.isString(res) ? JSON.parse(res) : res;
						this.userInfo = res.patientInfo;
						console.log("patient-info", this.userInfo);
					})
					.catch(err => {
						this.$message.error("获取用户信息失败");
					});
			}
		},
		updateValues(slugName, val, property) {
			console.log(JSON.stringify(val));
			this.formValues[slugName] = val;
			this.property = property;
			console.log("property", val);
		},
		save(slugName, closeLoaidng) {
			let value = this.formValues[slugName];
			let data = {};
			if (value) {
				value.forEach(item => {
					data[item.slug] = item;
				});
			}
			this.$refs[slugName][0]
				.validate()
				.then(_ => {
					//提交数据
					saveCasedetail(
						this.id,
						this.templateId, //模板id
						this.illType, //模板名称
						"5aaa1c15f9054a00093fa928", //this.patientId,
						data,
						JSON.stringify(this.property) == "{}"
							? null
							: this.property
					)
						.then(res => {
							closeLoaidng && closeLoaidng();
							//其它逻辑
							this.$message.success("操作成功！");
							this.patternCtrls[slugName] = "view";
							this.$emit("update-value");
						})
						.catch(err => {
							this.$message.error(`提交失败！${err.message}`);
							console.log(err);
							closeLoaidng && closeLoaidng();
						});
					//
				})
				.catch(err => {
					closeLoaidng && closeLoaidng();
				});
		},
		cancel(name) {
			this.patternCtrls[name] = "view";
		}
	},
	created() {
		this.load();
	}
};
</script>
<style scoped>
.form-footer {
	margin: 0 20px 2rem 20px;
}
.basic {
	width: 100%;
	/*height: 40px;*/
	line-height: 30px;
	/*margin-bottom: 10px;*/
}
.diagnose {
	height: 40px;
	line-height: 40px;
	margin-bottom: 10px;
}
.el-tag {
	/*margin: 10px 0 15px 10px;*/
	min-height: 28px;
	line-height: 26px;
	font-size: 14px;
}
.tab-icon {
	width: 30px;
	height: 30px;
}
.content {
	padding-top: 3px !important;
	color: #999;
}
.wt-header {
	width: 100%;
	margin: 0 0 10px 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.wt-header > * {
	display: inline-block;
	vertical-align: middle;
	margin: 4px 0 4px 0;
}
.wt-header h3 {
	margin: 0;
}
.wt-header span {
	margin-left: 10px;
}
.message,
.rightButtons {
	float: right;
	margin-top: 0;
}
.message > div {
	padding-right: 2em;
}
</style>